<!DOCTYPE html>

<html>
    <head>
        <style>
        /* 使用绝对定位 + transform实现水平垂直居中 */
        .father {
            width: 600px;
            height: 600px;
            margin: auto;
            position: relative;
            background-color: antiquewhite;
        }

        .son {
            width: 100px;
            height: 100px;
            /* 使用绝对定位将左上角顶点移动至中心位置*/
            position: absolute;
            background-color: aquamarine;
            left: 50%;
            top: 50%;
            /* 利用transform将元素拉回值中心位置 */
            transform: translate(-50%,-50%);
        }
        </style>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
</html>